<template>
  <div>
    <h2>房价列表</h2>
    <hr>
    <table border="1">
      <tr>
        <td>房间名称</td>
        <td>房间数量</td>
        <td>价格</td>
        <td>操作</td>
      </tr>
      <tr v-for="item in list">
        <td>{{ item.name }}</td>
        <td>{{ item.num }}</td>
        <td>{{ item.price }}</td>
        <td>
          <input type="button" value="排房" @click="PF">
         
        </td>
      </tr>
    </table>
  </div>
</template>

<script setup lang="ts">
import{reactive,toRefs,onMounted} from 'vue';
import{useRouter,useRoute} from 'vue-router';
import axios from 'axios';

const router = useRouter();
const route = useRoute();
let data:any = reactive({
  list:[]
})

let {list} = toRefs(data)


onMounted(() => {
   Show()
})

function Show(){
  axios({
    url:'https://localhost:7105/api/FangPrice/Show',
    method:'get'
  })
  .then(res=>{
    list.value = res.data.data
  })
  .catch(
    err=>{
      console.log(err)
    }
  )
}

function PF(){
  alert('排房成功')
  return;
}


</script>

<style scoped>

</style>